<template>
  <div class="editAccount">
    <van-nav-bar :title="title" left-arrow @click-left="onClickLeft" />
    <div style="padding: 16px">
      <van-form @submit="onSubmit">
        <van-field
          v-model="insureName"
          required
          label="投保人名称"
          placeholder="请输入投保人名称"
          :rules="[{ required: true, message: '请输入投保人名称' }]"
        />
        <van-field
          readonly
          clickable
          required
          :rules="[{ required: true, message: '请选择证件类型' }]"
          name="picker"
          :value="insureCertificateType"
          label="证件类型"
          placeholder="点击选择"
          @click="showPicker = true"
        />
        <van-popup v-model="showPicker" position="bottom">
          <van-picker
            show-toolbar
            :columns="columns.map((item) => item.label)"
            @confirm="onConfirm"
            @cancel="showPicker = false"
          />
        </van-popup>
        <van-field
          v-model="insureCertificateNumber"
          required
          label="证件号码"
          placeholder="请输入证件号码"
          :rules="[
            { required: true, message: '请输入证件号码' },
            {
              validator: (value, rule) => checkDocument(value, rule),
              message: '请输入正确的证件号码',
            },
          ]"
        />
        <van-field
          v-model="contactName"
          required
          label="联系人姓名"
          placeholder="请输入联系人姓名"
          :rules="[{ required: true, message: '请输入联系人姓名' }]"
        />
        <van-field
          v-model="contactPhone"
          required
          label="联系电话"
          placeholder="请输入联系电话"
          :rules="[
            { required: true, message: '请输入联系电话' },
            {
              validator: (value, rule) => phoneNumberRight(value, rule),
              message: '请输入正确的手机号码',
            },
          ]"
        />
        <!-- <van-field
          v-model="consigneeName"
          required
          label="收货人名称"
          placeholder="请输入收货人名称"
          :rules="[{ required: true, message: '请输入收货人名称' }]"
        />
        <van-field
          v-model="consigneePhone"
          required
          label="收货人电话"
          placeholder="请输入收货人电话"
          :rules="[
            { required: true, message: '请输入收货人电话' },
            {
              validator: (value, rule) => phoneNumberRight(value, rule),
              message: '请输入正确的手机号码',
            },
          ]"
        />
        <van-field
          v-model="consigneeAddress"
          required
          label="收货地址"
          placeholder="请输入收货地址"
          :rules="[{ required: true, message: '请输入收货地址' }]"
        /> -->
        <div style="margin: 16px 0">
          <van-button block type="info" native-type="submit">提交</van-button>
        </div>
      </van-form>
    </div>
  </div>
</template>
  
<script>
const reg =
  /^\d{6}(18|19|20)?\d{2}(0[1-9]|1[0-2])(0[1-9]|[12]\d|3[01])\d{3}(\d|X)$/i;
const reg2 = /^[0-9A-Z]{18}$/;
import { documentType } from "@/utils/options";
export default {
  name: "home",
  computed: {
    applicant() {
      const applicant = localStorage.getItem("applicant");
      if (applicant) {
        return JSON.parse(applicant);
      }
      return {};
    },
    hasInsureId() {
      return !!this.applicant.insureId || this.applicant.insureId === 0;
    },
    title() {
      if (!this.hasInsureId) {
        return "新增投保人";
      }
      return "编辑投保人";
    }
  },
  data() {
    return {
      columns: documentType,
      showPicker: false,
      insureName: "",
      insureCertificateType: "身份证",
      insureCertificateNumber: "",
      contactName: "",
      contactPhone: "",
      consigneeName: "",
      consigneePhone: "",
      consigneeAddress: "",
    };
  },
  methods: {
    // 1.手机号码验证
    phoneNumberRight(val) {
      return /^1[3-9]\d{9}$/.test(val);
    },
    checkDocument(value, rule) {
      if (this.insureCertificateType === "身份证") {
        return reg.test(value);
      }
      return reg2.test(value);
    },
    onConfirm(insureCertificateType) {
      this.insureCertificateType = insureCertificateType;
      this.showPicker = false;
    },
    onClickLeft() {
      const url = window.location.href
        if (url.includes('tempInput')) {
          this.$router.push(`/tempInput?insureInfoId=${this.$route.query.insureInfoId}&templateName=${this.$route.query.templateName}&getInsuredDataFromCache=true`);
        } else {
          this.$router.push("/applicant");
        }
    },
    onSubmit() {
      const {
        insureName,
        insureCertificateType,
        insureCertificateNumber,
        contactName,
        contactPhone,
        consigneeName,
        consigneePhone,
        consigneeAddress,
      } = this;
      const params = {
        insureName,
        insureCertificateType: documentType.find(
          (item) => item.label === insureCertificateType
        ).value,
        insureCertificateNumber,
        contactName,
        contactPhone,
        consigneeName,
        consigneePhone,
        consigneeAddress,
      };
      const url = this.hasInsureId
        ? "/config/insure/update"
        : "/config/insure/add";
      if (this.hasInsureId) {
        params.insureId = this.applicant.insureId;
      }
      const message = this.hasInsureId ? "编辑成功" : "新增成功";
      this.$post(url, params).then((res) => {
        this.$toast({
          message,
          duration: 800,
        });
        
        this.onClickLeft();
      });
    },
  },
  mounted() {
    const { applicant } = this;
    if (JSON.stringify(applicant) !== "{}") {
      this.insureName = applicant.insureName;
      this.insureCertificateType = applicant.insureCertificateType;
      this.insureCertificateNumber = applicant.insureCertificateNumber;
      this.contactName = applicant.contactName;
      this.contactPhone = applicant.contactPhone;
      this.consigneeName = applicant.consigneeName;
      this.consigneePhone = applicant.consigneePhone;
      this.consigneeAddress = applicant.consigneeAddress;
    }
  },
};
</script>
<style scoped>
.editAccount {
  background-color: #f5f5f5;
  height: 100%;
  width: 100%;
}
</style>
